<template>
  <NavBar v-show="showHeader"></NavBar>

  <router-view></router-view>

  <!-- <Footer v-show="showHeader"></Footer> -->
  <Footer v-if="showFooter"></Footer>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>

<script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Footer from "../Footer/index.vue";
import NavBar from "../NavBar/index.vue";
const router = useRouter();
const route = useRoute();
// onMounted(() => {
//   console.log(route.meta, "meta");
//   console.log(route.path, "path");
// });
const showHeader = ref(true);
const showFooter = ref(true);
const routeNameArr = ["Rank", "MV"];
//第一次加载获取不到，需要监视获取
watch(route, () => {
  // if (route.name === "TplayMusic") {
  //   showHeader.value === false;
  //   // console.log(showHeader.value);
  //   console.log(111);
  // } else {
  //   console.log(222);

  //   showHeader.value === true;
  // }
  // if (!route.meta.isShowHeader) {
  //   showHeader.value = route.meta.isShowHeader as boolean;
  // } else {
  //   showHeader.value = true;
  // }
  if (routeNameArr.includes(route.name as string)) {
    showFooter.value = false;
  } else {
    showFooter.value = true;
  }
});

const bodyWidth = ref(0);
onMounted(async () => {
  bodyWidth.value = document.body.clientWidth;
  // 获取视口宽度

  window.onresize = () => {
    return (() => {
      bodyWidth.value = document.body.clientWidth;
    })();
  };
});
</script>

<style scoped></style>
<style></style>
